<template>
	<view class="service-item" v-if="Object.keys(item).length > 0">
		<view class="cardview ser-img mgb10">
			<image mode="scaleToFill" :src='item.imgUrl' :alt="item.title" style="width: 100%;" />
		</view>
		<view class="cardview pd bgwhite">
			<view class="mgb">
				<view class="fl-rsb">
					<view class="stit mgb10">{{item.title}}</view>
					<!-- 收藏按钮 -->
					<view class="mark-area">
						<uni-icons :type="isMark ? 'star' : 'star-filled'" size="30" color="#EA973D"></uni-icons>
					</view>
				</view>
				<view class="stext"><uni-icons type="location" size="16" color="#EA973D"></uni-icons>{{item.subTitle}}</view>
			</view>
			<view class="bd1 mgb"></view>
			<view class="mgb desc">
				<view class="stext">{{item.desc}}</view>
			</view>
		</view>
		<view class="float-area bgwhite pdtb">
			<view class="fl-rc pdlr">
				<view class="btn btn-primary fl mgr" plain @click="daka">
					<text>打卡</text>
				</view>
				<view class="btn btn-primary fl mgr" plain @click="wancheng">
					<text>完成</text>
				</view>
				<view class="btn btn-ghost fl" plain @click="openLocation">
					<uni-icons type="paperplane" size="16" color="#EA973D"></uni-icons>
				</view>
			</view>
		</view>
	</view>
	<view v-else>
		暂无内容
	</view>
</template>

<script setup>
	import {
		reactive,
		ref
	} from 'vue';
	const templateList = {
		"attrations": {
			title: '景区名称：',
			subTitle: '地址',
			desc: '介绍：',
		},
		"catering": {
			title: '餐厅名称：',
			subTitle: '地址',
			desc: '介绍：',
		}
	};
	const props = defineProps({
		title: {
			type: String,
			defult: ''
		},
		type: {
			type: String,
			defult: ''
		},
		item: {
			type: Object,
			default: () => {
				return {
					imgUrl: '',
					title: '',
					isMark: true,
					subTitle: '',
					desc: '',
					distance: ''
				}
			}
		}
	});
	const emit = defineEmits(['goDetail', 'signExam', 'help']);
	const goDetail = (item) => {
		const eid = parseInt(props.loginType) == 1 ? item.eid : item.pid
		emit('goDetail', eid);
	}
	const help = (kdCode) => {
		emit('help', kdCode);
	}
	const signExam = (kdCode) => {
		emit('signExam', kdCode);
	}
	const isNull = (val) => {
		return val === undefined || val === '' || val === null ? '' : val
	}
	const openLocation = (item) => {
		// 调用【跨端】地图API打开定位
		uni.openLocation({
			latitude: Number(item.kdy),
			longitude: Number(item.kdx),
			scale: 18, // 缩放级别，取值范围为5~18  
			name: item.kdName + item.floorName, // 可选，位置名称  
			address: item.kdAddress // 可选，位置详细描述  
		});
	}
	// 考楼图预览
	const viewFloorPlan = (item) => {
		if (item.floorPic) {
			uni.previewImage({
				current: item.floorPic, // 当前显示图片的链接
				urls: [item.floorPic], // 需要预览的图片链接列表
				indicator: 'number',
				loop: true
			});
		} else {
			uni.showToast({
				title: '考楼图暂未上传',
				icon: 'none'
			});
		}
	}
</script>

<style lang="scss" scoped>
	.btn{
		width: 100%;
	}
	.service-item {

		.title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.ser-img {
			min-height: 180px;
			position: relative;
		}
	}

	.mark-area {}
</style>